import React, {useRef} from 'react';
import {connect} from "react-redux";
import {Dropdown, Button, Avatar} from 'antd';
import style from './HomeLeft.module.scss'
import {UserOutlined} from '@ant-design/icons';
import {logOutSystem} from "../../store/actions/userActions";
import {useNavigate} from "react-router-dom";
import PersonalData from "../PersonalData/PersonalData";

function HomeLeft(props) {
    //头像
    const imgUrl = props.user ? props.user.userPhotoUrl : ''
    const Navigate = useNavigate()
    const PersonalDataRef = useRef()   //个人资料ref

    // 退出系统
    const logOut = () => {
        props.logOutSystem()
        Navigate('/HomePage')
    }

    const DrawerOpen = () => {
        PersonalDataRef.current.showModal()
    }


    const items = [
        {
            key: '1',
            label: (
                <div onClick={DrawerOpen}>我的资料</div>
            ),
        },
        {
            key: '2',
            label: (
                <Button type="text" onClick={logOut} block>退出</Button>
            ),
        },
    ];


    return (
        <div className={style.homeLeftBody}>
            <div>
                <Dropdown
                    menu={{items}}
                    placement="bottom"
                >
                    <div>{props.user ? props.user.userName : ''}</div>
                </Dropdown>
            </div>
            <div>
                <Avatar size="large" src={imgUrl} icon={props.user ? "" : <UserOutlined/>}>
                </Avatar>
            </div>
            <PersonalData ref={PersonalDataRef}></PersonalData>
        </div>);
}

const mapStoreState = (state) => {
    return {
        user: state.UserRedux.user
    }
}

const mapStoreAction = {
    logOutSystem
}
export default connect(mapStoreState, mapStoreAction)(HomeLeft);
